<template>
	<view>
		<view class="top-bg u-bg-primary"></view>
		<view class="u-bg-fff u-p-30 u-m-20">
			<view @click="chooseAvatar" @longpress="delAvatar">
				<view class="u-flex u-row-center">
					<u-avatar :src="avatar" size="large"></u-avatar>
				</view>
				<view class="u-flex u-row-center u-margin-10">
					<u-icon name="play-right-fill" size="18" label-size="24" top="1rpx" label="点击选择图片"
						label-pos="left"></u-icon>
				</view>
			</view>
			<view class="u-p-10 u-m-t-40 u-bg u-flex u-row-between u-col-center">
				<view class="u-flex-1 u-content-color u-font-md u-text-center">
					账本名
				</view>
				<view class="u-flex-2">
					<u-input v-model="bookName" type="text" placeholder="请输入账本名" maxlength="25" :focus="inpFocus"
						confirm-type="提交" />
				</view>
			</view>
			<view class="u-p-10 u-m-t-40 u-bg u-flex u-row-between u-col-center">
				<view class="u-flex-1 u-content-color u-font-md u-text-center">
					每月预算
				</view>
				<view class="u-flex-2">
					<u-input @click="show = true" v-model="budget" type="digit" placeholder="请输入每月预算" maxlength="25"
						:focus="inpFocus" confirm-type="提交" />
				</view>
			</view>
			<view class="u-p-10 u-m-t-40 u-bg u-flex u-row-between u-col-center">
				<view class="u-flex-1 u-content-color u-font-md height-70 u-text-center">
					默认账本
				</view>
				<view class="u-flex-2 u-flex u-col-center height-70">
					<u-switch v-model="def" active-color="#19be6b"></u-switch>
				</view>
			</view>
			<view class="u-p-10 u-m-t-40 u-bg u-flex u-row-between u-col-center">
				<view class="u-flex-1 u-content-color u-font-md height-70 u-text-center">
					邀请验证
				</view>
				<view class="u-flex-2 u-flex u-col-center height-70">
					<u-switch v-model="audit" active-color="#19be6b"></u-switch>
				</view>
			</view>
			<view class="u-p-10 u-m-t-40 u-bg u-flex u-row-between u-col-center">
				<view class="u-flex-1 u-content-color u-font-md height-70 u-text-center">
					私密账本
				</view>
				<view class="u-flex-2 u-flex u-col-center height-70">
					<u-switch v-model="search" active-color="#19be6b"></u-switch>
				</view>
			</view>
			<view class="u-m-t-30">
				<u-button :loading="isLoad" @click="submit" type="success" :custom-style="{'border-radius':'20rpx'}"
					throttle-time="500" hover-class="none">提 交</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	let _this;
	export default {
		data() {
			return {
				showPopup: false,
				bookName: '',
				avatar: '',
				def: false,
				audit: false,
				search: false,
				show: false,
				isLoad: false,
				budget: ''
			}
		},
		created() {
			uni.$on('uAvatarCropper', path => {
				_this.avatar = path;
				console.log("文件地址：" + _this.avatar)
				uni.uploadFile({
					url: 'https://account-book-front.1900shop.online/api/file/upload',
					filePath: path,
					name: 'file',
					formData: {
						type: 1
					},
					success: (response) => {
						console.log("响应：" + JSON.stringify(response));
						const res = JSON.parse(response.data);
						if (res.status == 200) {
							_this.avatar = res.message;
							_this.$u.toast('上传成功')
						} else {
							_this.$u.toast('文件上传失败')
						}
					},
					fail() {
						_this.$u.toast('文件上传失败')
					},
					complete() {
						uni.hideLoading()
					}
				});
			})
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#42b479',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		},
		onLoad() {
			_this = this;
		},
		onShow() {
			if (!_this.os_token) {
				_this.goReLaunchUrl('/pages/user/login')
			}
		},
		methods: {
			//创建账本
			async submit() {
				if (!_this.os_token) {
					_this.goReLaunchUrl('/pages/user/login')
				}
				_this.isLoad = true
				uni.showLoading({
					title: '正在创建账本...'
				})
				if (!_this.bookName) {
					_this.$u.toast('请输入账本名')
					_this.isLoad = false
					return
				}
				await _this.$u.api.saveAndUpdate({
					bookName: _this.bookName,
					bookAvatar: _this.avatar,
					userAudit: _this.audit ? 1 : 0,
					showSearch: _this.search ? 1 : 0,
					budget: _this.budget,
					defaultBook: _this.def ? 1 : 0
				}).then((res) => {
					_this.$u.toast('创建成功')
					_this.isLoad = false
					_this.goTabbarUrl('/pages/app/index')
				})
			},
			//上传头像
			chooseAvatar() {
				if (!_this.os_token) {
					_this.isLogin()
					return
				}
				_this.$u.route({
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					params: {
						destWidth: 150,
						rectWidth: 150,
						fileType: 'jpg',
					}
				})
			},
			//跳转到页面，关闭其他页面
			goReLaunchUrl(path) {
				_this.$u.vuex('os_token', '');
				_this.$u.vuex('os_user', '');
				uni.reLaunch({
					url: path
				});
			},
			//跳转到tabbar
			goTabbarUrl(path) {
				uni.switchTab({
					url: path
				});
			}
		}
	}
</script>

<style lang="scss">
	.u-bg {
		background-color: $u-bg-color;
	}

	.u-bg-primary {
		background-color: $u-type-success;
	}

	.u-bg-fff {
		background-color: #FFFFFF;
	}

	.top-bg {
		height: 100rpx;
		margin-bottom: -100rpx;
	}

	.height-70 {
		height: 70rpx;
		line-height: 70rpx;
	}
</style>